<template>
    <div class="centers">
        <div>
            <div class="box">
                <div class="base_info">
                    <img class="left_img" src="../img/03.png" alt="" />
                </div>
                <div class="base_level">
                    <span style="display: block">张晓飞NPsI</span>
                    <span class="level_box"> 你还不是会员 </span>
                </div>
            </div>
            <div class="saving">
                <span>开通会员平均每年可省：￥9500</span>
            </div>
        </div>

        <div class="price_area_main">
            <div class="price_area">
                <div class="price_block">
                    <p class="t1">1年会员</p>
                    <div class="t2">
                        ￥
                        <span>268</span>
                    </div>
                    <p>折合￥22.3/月</p>
                </div>

                <div class="price_block">
                    <div class="recommend_flag">
                        <span class="recommend_btn">推荐</span>
                    </div>
                    <p class="t1">3年会员</p>
                    <div class="t2">
                        ￥
                        <span>588</span>
                    </div>
                    <p>折合￥16.3/月</p>
                </div>

                <div class="price_block">
                    <p class="t1">5年会员</p>
                    <div class="t2">
                        ￥
                        <span>898</span>
                    </div>
                    <p>折合￥14.9/月</p>
                </div>

                <div class="price_block">
                    <p class="t1">1个月会员</p>
                    <div class="t2">
                        ￥
                        <span>68</span>
                    </div>
                    <p class="spaceyouth">青少年专属</p>
                </div>

                <div class="price_block">
                    <p class="t1">3个月会员</p>
                    <div class="t2">
                        ￥
                        <span>98</span>
                    </div>
                    <p>折合￥22.6/月</p>
                    <p class="spaceyouth">青少年专属</p>
                </div>

                <div class="price_block">
                    <p class="t1">6个月会员</p>
                    <div class="t2">
                        ￥
                        <span>188</span>
                    </div>
                    <p>折合￥31.3/月</p>
                </div>

                <div class="btn_area">
                    <button class="el-button">立即以588元开通</button>
                    <div class="flag_dialog">另外再送30天</div>
                </div>

                <div class="agreement_guide_el-row">
                    开通即视为同意
                    <a class="agreement_link" href="/vip-agreement">《会员服务协议》</a>
                </div>
            </div>
        </div>

        <div class="member_benefits">
            <div class="title">会员专属权益</div>
            <ul class="interests-lists">
                <li>
                    <div class="list-content">
                        <img src="https://rs.dance365.com/teach_video_free.png" />
                        <br />
                        <p>
                            <span>713</span>
                            个会员专区
                        </p>
                        <p>课程免费学习</p>
                    </div>
                </li>
                <li>
                    <div class="list-content">
                        <img src="https://rs.dance365.com/member_preferential.png" />
                        <br />
                        <p>非会员专区课程</p>
                        <p>可获会员立减优惠</p>
                    </div>
                </li>
                <li>
                    <div class="list-content">
                        <img src="https://rs.dance365.com/member_screen@2x.png" />
                        <br />
                        <p>同屏对比</p>
                        <p>功能</p>
                    </div>
                </li>
                <li>
                    <div class="list-content">
                        <img src="https://rs.dance365.com/update_music@3x.png" />
                        <br />
                        <p>音频提取</p>
                        <p>功能</p>
                    </div>
                </li>
                <li>
                    <div class="list-content">
                        <img src="https://rs.dance365.com/music_clip@3x.png" />
                        <br />
                        <p>音频剪辑</p>
                        <p>功能</p>
                    </div>
                </li>
                <li>
                    <div class="list-content">
                        <img src="https://rs.dance365.com/member_icon_beat.png" />
                        <br />
                        <p>节拍口令</p>
                        <p>功能</p>
                    </div>
                </li>
                <li>
                    <div class="list-content">
                        <img src="https://rs.dance365.com/member_photo_download1@3x.png" />
                        <br />
                        <p>保存视频到</p>
                        <p>手机本地相册</p>
                    </div>
                </li>
                <li>
                    <div class="list-content">
                        <img src="https://rs.dance365.com/lv_ad@3x.png" />
                        <br />
                        <p>免广告特权</p>
                    </div>
                </li>
                <li>
                    <div class="list-content">
                        <img src="https://rs.dance365.com/lv_accelerate.png" />
                        <br />
                        <p>成长等级</p>
                        <p>加速特权</p>
                    </div>
                </li>
                <li>
                    <div class="list-content">
                        <img src="https://rs.dance365.com/course_equity.png" />
                        <br />
                        <p>会员学习</p>
                        <p>成长优先帮扶</p>
                    </div>
                </li>
                <li>
                    <div class="list-content">
                        <img src="https://rs.dance365.com/member_logo.png" />
                        <br />
                        <p>会员专享</p>
                        <p>身份标识</p>
                    </div>
                </li>
                <li>
                    <div class="list-content">
                        <img src="https://rs.dance365.com/update_equity.png" />
                        <br />
                        <p>享受新增</p>
                        <p>权益和功能</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "My_member",
});
</script>

<script setup lang="ts"></script>

<style scoped lang="less">
.centers {
    width: 960px;

    .box {
        width: 960px;
        height: 100px;
        text-align: center;

        .base_info {
            float: left;

            .left_img {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                margin-left: 350px;
            }
        }

        .base_level {
            margin-right: 350px;
            padding-top: 20px;

            .level_box {
                font-size: 12px;
                margin-top: 10px;
                color: #ff43d0;
            }
        }
    }

    .saving {
        text-align: center;
        margin-top: 19px;
    }

    .price_area_main {
        text-align: center;
        width: 960px;
        height: 520px;
        border-bottom: 1px solid #ccc;

        .price_area {
            float: left;
            padding-top: 30px;
            padding-left: 80px;
            text-align: center;
            width: 800px;

            .price_block {
                position: relative;
                float: left;
                width: 230px;
                height: 150px;
                margin-top: 20px;
                margin-right: 25px;
                border: 1px solid #ccc;
                border-radius: 10%;

                &:hover {
                    color: #e64984;
                    transition: all 0.2s ease;
                }

                .recommend_flag {
                    display: block;
                    position: absolute;
                    width: 76px;
                    height: 36px;
                    line-height: 36px;
                    right: -20px;
                    top: -16px;
                    padding: 3px 2px;
                    background-color: #fff;
                    border-radius: 20px;

                    .recommend_btn {
                        display: inline-block;
                        width: 100%;
                        height: 100%;
                        color: #fff;
                        font-size: 14px;
                        background: linear-gradient(-56deg, #ff638f, #ff4683);
                        border-radius: 20px;
                    }
                }

                .t1 {
                    font-size: 14px;
                    margin-top: 15px;
                    margin-bottom: 15px;
                }

                .t2 {
                    margin-bottom: 15px;

                    span {
                        font-size: 30px;
                    }
                }

                .spaceyouth {
                    background: linear-gradient(-56deg, #ff4683, #ff638f);
                    height: 24px;
                    line-height: 24px;
                    border-radius: 12px;
                    padding: 0 20px;
                    color: #fff;
                    font-size: 14px;
                    display: inline-block;
                }
            }

            .btn_area {
                width: 330px;
                display: block;
                margin: 0 auto;
                position: relative;

                .el-button {
                    width: 330px;
                    height: 56px;
                    font-size: 16px;
                    margin: 30px auto 12px;
                    border-radius: 10px;
                    background: linear-gradient(-56deg, #ff4683, #ff638f);
                    color: #fff;
                    cursor: pointer;
                }

                .flag_dialog {
                    box-sizing: border-box;
                    cursor: pointer;
                    position: absolute;
                    top: 8px;
                    right: 15px;
                    color: #fff;
                    display: inline-block;
                    width: 103px;
                    height: 51px;
                    padding-top: 11px;
                    font-size: 14px;
                    margin-top: 350px;
                    background: url(https://rs.dance365.com/vip_bubble@2x.png) no-repeat 0 0;
                    background-size: 100% 100%;
                }
            }

            .agreement_guide_el-row {
                font-size: 12px;

                .agreement_link {
                    color: #f93684;
                    text-decoration: none;
                }
            }
        }
    }

    .member_benefits {
        margin-top: 32px;
        padding-bottom: 15px;
        border-bottom: 1px solid #e3e3e3;

        .title {
            font-size: 20px;
            font-weight: 900;
        }

        .interests-lists {
            display: flex;
            flex-wrap: wrap;
            margin: 20px auto 5px;
            padding: 0 12px;

            li {
                box-sizing: border-box;
                width: 129px;
                height: 129px;
                margin: 0 30px 30px 0;
                padding-top: 14px;
                text-align: center;
                font-size: 14px;
                border: 1px solid #e3e3e3;
                border-radius: 10px;
                line-height: 20px;

                .list-content {
                    img {
                        width: 46px;
                        height: 42px;
                        margin: 0 auto;
                    }

                    span {
                        color: #f93684;
                    }
                }
            }

            :nth-child(6) {
                margin: 0 0 30px 0;
            }

            :nth-child(12) {
                margin: 0 0 30px 0;
            }
        }
    }
}
</style>
